<template>
  <div id="footer">
    <router-view />
    <van-tabbar route active-color="#16b887">
      <van-tabbar-item replace to="/home">
        <span>主页</span>
        <template #icon="props">
          <img :src="props.active ? baseUrl+tabbar.home.active : baseUrl+tabbar.home.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/job">
        <span>职位</span>
        <template #icon="props">
          <img :src="props.active ? baseUrl+tabbar.pos.active : baseUrl+tabbar.pos.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/message" :badge="msgNum">
        <span>消息</span>
        <template #icon="props">
          <img :src="props.active ? baseUrl+tabbar.msg.active : baseUrl+tabbar.msg.inactive">
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/mine">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? baseUrl+tabbar.mine.active : baseUrl+tabbar.mine.inactive">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: {
    msgNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // baseUrl: 'http://192.168.67.138:82/images/tabbar/',
      baseUrl: 'https://ilonggang.lggov.cn/zhzp/person/images/tabbar/',
      tabbar: {
        home: {
          active: 'home_check.png',
          inactive: 'home.png'
        },
        pos: {
          active: 'job_check.png',
          inactive: 'job.png'
        },
        msg: {
          active: 'msg_check.png',
          inactive: 'msg.png'
        },
        mine: {
          active: 'mine_check.png',
          inactive: 'mine.png'
        }
      }
    }
  }
  // created() {
  //   console.log('created', this.active)
  // }
}
</script>
<style lang="scss" scoped>

</style>
